<script setup lang="ts" name="App">
import { ref } from 'vue'
// 目标：获取 DOM
// #1 准备一个 ref 引用
// 泛型参数就规定了初始值的类型
// const h3Ele = ref<HTMLHeadingElement>(document.querySelector('h3')!)
const h3Ele = ref<HTMLHeadingElement | null>(null)

const handleClick = () => {
  // #3 h3Ele.value 就是 DOM
  // console.log(h3Ele.value)
  // h3Ele.value. // 点的时候没有提示
  // h3Ele.value 默认是 null 类型，所有点的时候没有提示
  // 只要指定 ref 初始值的类型为 H3 这个 DOM 类型，其实就有提示了
  // 把 null 排除掉
  /* if (h3Ele.value) {
    h3Ele.value.style.background = 'teal'
  } */
  // 类型断言
  ;(h3Ele.value as HTMLHeadingElement).style.background = 'pink'
  // h3Ele.value.style.background = 'pink'
}
</script>
<template>
  <div>
    <!-- #2 和 h3 的 ref 属性进行绑定 -->
    <h3 ref="h3Ele">Hello Vue3 + TS</h3>

    <button @click="handleClick">改变颜色</button>
  </div>
</template>
